<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<%@ include file="/WEB-INF/jspf/common-imports.jspf" %>
<title>태그리스트</title>

	<script type="text/javascript">
		/** 태그명 등록 창 **/
		function openSave() {
			$("#cid_add_panel").show();
			$("#cid_list_panel").hide();
		}
		function closeSave() {
			$("#cid_add_panel").hide();
			$("#cid_list_panel").show();
		}
		function openDetail() {
			$("#cid_detail_panel").show();
			$("#cid_list_panel").hide();
		}
		function closeDetail() {
			$("#cid_detail_panel").hide();
			$("#cid_list_panel").show();
		}
		/** 태그 리스트 조회 **/
		function doList() {
			$.invokeGET(
				"/rest/PRODUCT/TAG/",
				$("#listFrm"),
				function(model) {
					var data = model.MODEL;
					
					if (data != null) {
						$("#cid_list > tbody").html("");
						var html = "";
						var flag = "사용";
						
						for (var i = 0 ; i < data.length; i++) {
							html = "";							
							html += "<tr onclick=\"javascript:doDetail('"+data[i].seq+"')\" style='cursor:pointer'>";
							html += "	<td style=\"text-align:center\" width=\"60px\">"+data[i].seq+"</td>";
							html += "   <td style=\"text-align:center\">"+data[i].tag_name+"</th>";
							html += "	<td style=\"text-align:center\" width=\"100px\">"+"0"+"</th>";
							
							if (data[i].use_yn == "Y") {
								flag = "사용중";
							}else {
								flag = "사용안함";
							}
							
							html += "	<td style=\"text-align:center\" width=\"100px\">"+flag+"</td>";
							html += "</tr>";
							$("#cid_list > tbody").append(html);
						}
						
						makePagingControl(
							$("#cid_pageing"),
							$("#listFrm #page_no").val(),
							model.TOTAL_PAGE,
							5,
							function(p) {
								$("#listFrm #page_no").val(p);
								doList();
							}
						);
					}
				}
			);
		}
		
		/** 태그 등록 */
		function doSave() {
			$.invokePOST(
				"/rest/PRODUCT/TAG/add",
				$("#addFrm"),
				function(model) {
					if (model.MODEL != null && model.MODEL > 0) {
						alert("카테고리 저장이 완료되었습니다");
						closeSave();
						doList();
					}
				}
			);
		}
		
		/** 태그 삭제 **/
		function doDelete() {
			
		}
		
		/** 태그 수정 **/
		function doUpdate() {
			$.invokePUT(
				"/rest/PRODUCT/TAG/",
				$("#detailFrm"),
				function(model) {
					var data = model.MODEL;
					if (data.seq > 0) {
						doList();
						closeDetail();
					}
				}
			);
		}
		
		/** 태그 상세 **/
		function doDetail(idx) {
			$.invokeGET(
				"/rest/PRODUCT/TAG/"+idx,
				$("#listFrm"),
				function(model) {
					if (model.MODEL != null) {
						var data = model.MODEL;
						$("#detailFrm #tag_name").val(data.tag_name);
						if (data.use_yn == "Y") {
							$("#detailFrm #cid_use_yn_y").filter("input[@value='" + data.use_yn +"']").attr("checked", "checked");
						} else {
							$("#detailFrm #cid_use_yn_n").filter("input[@value='" + data.use_yn +"']").attr("checked", "checked");
						}
						
						$("#detailFrm #seq").val(data.seq);
					} 
					
					openDetail();
					
 				}
			);
		}
		
		$(document).ready(function(){
			doList();
		});
	</script>
</head>
<body>
	<form id="emptyFrm" name="emptyFrm"></form>
	<!-- =============================================== menu 시작 -->
	<%@ include file="/WEB-INF/jspf/menu_header-imports.jsp" %>
	<%@ include file="/WEB-INF/jspf/menu_left-imports.jsp" %>
	<!-- =============================================== menu 끝 -->
	
	<!-- =============================================== content 시작 -->
	
	<!-- 조회 화면 시작 -->
	<div id="cid_list_panel">
		<form name="listFrm" id="listFrm">
			<!-- 검색 시작 -->
			<div>
				<select>
					<option value="">전체</option>
					<option value="">태그명</option>
				</select> 
				<input type="text" name="" id="" value=""/>
				<a class="btn btn-small btn-primary" id="btn_search" href="javascript:doList()">
					<i class="icon-search"></i>
					검색
				</a>
			</div>
			<!-- 검색 끝 -->
		
			<!-- 버튼 시작 -->
			<div style="text-align:right">
				<a class="btn btn-small btn-primary" id="btn_save" href="javascript:openSave();">
					<i class="icon-search"></i>
					등록
				</a>
				<a class="btn btn-small btn-primary" id="btn_del" href="#">
					<i class="icon-delete"></i>
					삭제
				</a>
			</div>
			<!-- 버튼 끝 -->
			<br/>
			<!-- 리스트 시작 -->
			<table class="table table-striped table-bordered table-condensed" id="cid_list">
				<thead>
				<tr>
					<th style="text-align:center">번호</th>
					<th style="text-align:center">태그명</th>
					<th style="text-align:center">관련상품수</th>
					<th style="text-align:center">사용유무</th>
				</tr>
				</thead>
				
				<tbody>
				</tbody>
				
				<tfoot>
					<tr align="center">
						<td align="center" id="cid_pageing" colspan="4" style="text-align:center"></td>
					</tr>
				</tfoot>
			</table>
			
			<input type="hidden" name="page_no" id="page_no" value="1"/>
		</form>
	</div>
	<!-- 리스트 끝 -->
	<!-- 조회화면 끝 -->
	
	<!-- 등록 페이지 시작 -->
	<div id="cid_add_panel" style="display:none">
		<form name="addFrm" id="addFrm" class="form-inline form-horizontal">
			<fieldset>
				<legend>태그등록</legend>
				<div class="control-group">
					<label class="control-label" for="focusedInput">태그명</label>
					<div class="controls">
						<input type="text" name="tag_name" id="tag_name" value=""/>				
					</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="focusedInput">사용유무</label>
					<div class="controls">
						<input type="radio" name="use_yn" id="cid_use_yn_y" value="Y" checked="checked"/>&nbsp;사용&nbsp;
						<input type="radio" name="use_yn" id="cid_use_yn_n" value="N"/>&nbsp;사용안함&nbsp;
					</div>
				</div>
				<div class="form-actions">
					<a class="btn btn-small btn-primary" href="javascript:closeSave()">닫기</a>
					<a class="btn btn-small btn-primary" href="javascript:doSave()">등록</a>
				</div>
			</fieldset>
		</form>
	</div>
	<!-- 등록 페이지 끝 -->

	<!-- 수정 페이지 시작 -->
	<div id="cid_detail_panel" style="display:none">
		<form name="detailFrm" id="detailFrm" class="form-inline form-horizontal">
			<fieldset>
				<legend>태그수정</legend>
				<div class="control-group">
					<label class="control-label" for="focusedInput">태그명</label>
					<div class="controls">
						<input type="text" name="tag_name" id="tag_name" value=""/>
            		</div>
				</div>
				<div class="control-group">
					<label class="control-label" for="focusedInput">사용유무</label>
					<div class="controls">
						<input type="radio" name="use_yn" id="cid_use_yn_y" value="Y" checked="checked"/>&nbsp;사용&nbsp;
						<input type="radio" name="use_yn" id="cid_use_yn_n" value="N"/>&nbsp;사용안함&nbsp;
            		</div>
				</div>	
				<div class="form-actions">
					<a class="btn btn-small btn-primary" href="javascript:closeDetail()">닫기</a>
					<a class="btn btn-small btn-primary" href="javascript:doUpdate()">수정</a>
				</div>
				<input type="hidden" name="seq" id="seq" value=""/>
			</fieldset>
		</form>
	</div>
	<!-- 수정 페이지 끝 -->
	<!-- =============================================== content 끝 -->
	<!-- =============================================== footer 시작 -->
	<%@ include file="/WEB-INF/jspf/menu_foot-imports.jsp" %>	
	<!-- =============================================== footer 끝 -->	
</body>
</html>